<template>
  <div class="flex">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <table>
          <tr>
            <td>
              计划名称：
            </td>
            <td colspan="3">
              <input class="form-control" type="text" v-model="model.f_plan_name"  v-validate:f_plan_name='{ required: true }'>
            </td>
          </tr>
          <tr>
            <td>
              计划年份：
            </td>
            <td>
              <v-select id="c_plan_year" :value.sync="f_plan_year"
              :options='c_year_list' close-on-select clear-button></v-select>
            </td>
            <td>
              计划月份：
            </td>
            <td>
              <v-select id="c_plan_month" :value.sync="f_plan_month"
              :options='c_month_list' close-on-select clear-button></v-select>
            </td>
          </tr>
          <tr>
            <td>
              安检员：
            </td>
            <td colspan="3">
              <chooser :userid.sync='loginer.id' resource-type="user" :width='300' :select-data.sync='chosenOrg'></chooser>
              <button type="button" class="btn btn-success width-80" v-if ='$v.valid && f_checker_chosen' @click="confirm()">
                 <span class="glyphicon glyphicon-floppy-disk"></span> 保存
              </button>
            </td>
          </tr>
        </table>
      </form>
    </validator>
    <div class="span">
      <data-grid :model="model" partial='list' v-ref:grid >
        <template partial='head'>
          <tr>
            <th>用户名</th>
            <th>小区名称</th>
            <th>地址</th>
            <th>最后安检日期</th>
            <th>最后安检状态</th>
          </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_user_name}}</td>
          <td>{{row.f_residential_area}}</td>
          <td>{{row.f_address}}</td>
          <td>{{row.f_last_check_date}}</td>
          <td>{{row.f_last_check_state}}</td>
        </template>
      </data-grid>
    </div>
    <span>共{{ model.rows.length}}项</span>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'
import * as Util from '../Util'
let saveGen = function * (self) {
  self.model.f_plan_type = '预约计划'
  self.model.f_issued = '否'
  self.model.f_plan_year = self.f_plan_year[0]
  self.model.f_plan_month = self.f_plan_month[0]
  for (var i in self.model.rows) {
    self.model.rows[i].f_state = '未检'
    self.model.rows[i].f_upload_state = '未传'
  }
  yield self.$post('rs/logic/预约计划生成', {data: self.model})
}

export default {
  title: '预约计划',
  data () {
    let options = []
    let year = (new Date()).getFullYear()
    for(let i = year - 8; i <= year +1; i++ )
      options.push({label: i+'', value: i+''})
    let moptions = []
    for(let i= 1; i<= 12; i++)
      moptions.push({label: i + '', value: i + ''})
    let model = {rows: []}
    model.f_subcompany = Vue.f_subcompany
    return {
      model: model,
      f_checker_chosen: false,
      f_plan_year: year + '',
      f_plan_month: moptions[new Date().getMonth()].value,
      c_year_list: options,
      c_month_list: moptions,
      loginer: Util.f
    }
  },
  watch: {
    'chosenOrg' (val) {
      this.model.f_checker_id = val.id
      this.model.f_checker = val.name
      let branches = val.fullname.split('.')
      console.log('这是刚进去时的val海带丝UR与IDsay覅U盾是已发', val)
      console.log('branchesbranchesbranchesbranchesbranchesbranchesbranches', branches)
      if(branches.length> 2)
        this.model.f_subcompany = branches[2]
        console.log('val.children.lengthval.children.lengthval.children.length', val.children.length)
      this.f_checker_chosen = (val.children.length === 0)
    }
  },
  methods: {
    confirm () {
      if(!this.model.f_checker_id) {
        window.alert('请选择安检员！')
        return
      }
      let gen = saveGen(this)
      return co(gen)
    }
  },
  computed: {
    selected () {
      return this.$refs.grid.selected
    }
  }
}
</script>
